<template>
    <div>
        <div class="like-item" v-for="type in types"  :key="type.tradeItemId">
            <GoodsList class="like-img" :style="`background-image:url(${type.img})`" :detail="type">
            <!-- <div class="like-img"> -->
                <!-- <router-link to="/detail" tag="img" src="./images/btn.png"></router-link> -->
                <!-- <img src="../../public/images/btn.png"> -->
            <!-- </div> -->
            </GoodsList>
            <p>{{type.title}}</p>
            <div class="like-price">
                <span>￥ {{type.price}}</span>
                <span>{{type.cfav}}
                    <i class="iconfont icon-like"></i>
                </span>
            </div>
        </div>
    </div>
</template>
<script>
import GoodsList from "./goodsList";
export default {
    components:{
        GoodsList
    },
    props:{
        types:{
            type:Array,
            required:true,
            default(){
                return [];
            }
        }
    }

}
</script>
<style lang="less" scoped>
.content-detail-like,.like-box{
    >.like-item {
        width: 50%;
        height: 8rem;
        box-sizing: border-box;
        padding: 0.1rem;
        display: flex;
        flex-flow: row wrap;
        align-items: center;
        > .like-img {
            width: 100%;
            height: 70%;
            // background-image: url("../../public/images/u=1878125254,116198046&fm=11&gp=0.jpg");
            background-size: 100% 100%;
            position: relative;
            // &::after{
            //     content:"";
            //     background-image:url("../../public/images/btn.png");
            //     display:inline-block;
            //     width:1rem;
            //     height:1rem;
            //     background-size:100% 100%;
            //     background-repeat:repeat-x;
            // }
            // > img {
            //     width: 20%;
            //     height: 20%;
            //     position: absolute;
            //     top: 4.35rem;
            //     // left:2.8rem;
            //     left: 2.1rem;
            //     // &::after {
            //     //     content: "";
            //     //     background-image: url("../../public/images/btn.png");
            //     // }
            // }
        }
        > p {
            text-indent: 0.6rem;
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            text-overflow: ellipsis;
        }
        > .like-price {
            width: 100%;
            > span:first-child {
                font-weight: bold;
            }
            > span:last-child {
                float: right;
                color: @gray;
            }
        }
    }
}
// .like-box {
//     >.like-item {
//         width: 50%;
//         height: 8rem;
//         box-sizing: border-box;
//         padding: 0.1rem;
//         display: flex;
//         flex-flow: row wrap;
//         align-items: center;
//         > .like-img {
//             width: 100%;
//             height: 70%;
//             background-image: url("../../public/images/u=1878125254,116198046&fm=11&gp=0.jpg");
//             background-size: 100% 100%;
//             position: relative;
//             // &::after{
//             //     content:"";
//             //     background-image:url("../../public/images/btn.png");
//             //     display:inline-block;
//             //     width:1rem;
//             //     height:1rem;
//             //     background-size:100% 100%;
//             //     background-repeat:repeat-x;
//             // }
//             // > img {
//             //     width: 20%;
//             //     height: 20%;
//             //     position: absolute;
//             //     top: 4.35rem;
//             //     left:2.8rem;
//             //     // left: 2.1rem;
//             //     // &::after {
//             //     //     content: "";
//             //     //     background-image: url("../../public/images/btn.png");
//             //     // }
//             // }
//         }
//         > p {
//             text-indent: 0.6rem;
//             overflow: hidden;
//             display: -webkit-box;
//             -webkit-box-orient: vertical;
//             -webkit-line-clamp: 2;
//             text-overflow: ellipsis;
//         }
//         > .like-price {
//             width: 100%;
//             > span:first-child {
//                 font-weight: bold;
//             }
//             > span:last-child {
//                 float: right;
//                 color: @gray;
//             }
//         }
//     }
// }
</style>